<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>layer弹窗层基本使用</title>
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-primary" lay-on="alert">Alert</button>
    <button type="button" class="layui-btn layui-btn-primary" lay-on="confirm">Confirm</button>
    <button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>
    <button type="button" class="layui-btn layui-btn-primary" lay-on="iframe">Iframe</button>
    <button type="button" class="layui-btn layui-btn-primary" lay-on="tips">Tips</button>
</div>

<script src="layui/layui.js"></script>
<script>
    layui.use(function(){
        var layer = layui.layer;
        var util = layui.util;
        // 批量事件
        util.on('lay-on', {
            alert: function(){
                layer.alert('对话框内容');
            },
            confirm: function(){
                layer.confirm('确认吗？', {
                    btn: ['确定', '关闭'] //按钮
                }, function(){
                    layer.msg('第一个回调', {icon: 1});
                }, function(){
                    layer.msg('第二个回调', {
                        time: 20000, // 20s 后自动关闭
                        btn: ['明白了', '知道了']
                    });
                });
            },
            msg: function(){
                layer.msg('修改失败');
            },
            page: function(){
                // 页面层
                layer.open({
                    type: 1,
                    area: ['420px', '240px'], // 宽高
                    content: '<div style="padding: 11px;">任意 HTML 内容</div>'
                });
            },
            iframe: function(){
                // iframe 层
                layer.open({
                    type: 2,
                    title: '添加用户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['550px', '80%'],
                    content: 'adduser.html' // iframe 的 url
                });
            },
            tips: function(){
                layer.tips('用户名不能为空', this, {
                    tips: [2, 'red']
                });
            }
        });
    });
</script>

</body>
</html>